
import React from 'react'
import ReactDOM from 'react-dom'
import * as DeliveryAction  from '../../actions/DeliveryAction';
import * as PushMessageAction from '../../actions/PushMessageAction';
import { connect }  from 'react-redux';

import PushMessageSettingTools from './PushMessageSettingTools'
import PushMessageSettingList from './PushMessageSettingList'
import PushMessageSettingEdit from './PushMessageSettingEdit'
import DeliverySettingEdit from './DeliverySettingEdit'

import Paging from '../Paging'

class PushMessageSettingBody extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      activeData: {}
    }

  }

  componentDidMount() {
    var self = this;
    this.$modal = $(ReactDOM.findDOMNode(this.refs.PushMessageSettingEdit))
    this.$deliveryModal = $(ReactDOM.findDOMNode(this.refs.DeliverySettingEdit))
    this.props.dispatch(
      PushMessageAction.loadMessagesAsync({
      })
    )
  }

  componentDidUpdate() {

  }

  onMessageTypeClick(type) {
    this.$modal.modal("hide")
    switch (type) {
      case 'delivery':
        this.$deliveryModal.modal("show");
        break;
      default:
        break;
    }
  }

  onNewMessageClick() {
    this.$modal.modal("show")
  }

  onNewDeliverySubmit(data) {
    this.$deliveryModal.modal("hide")

    var first = data.first,
        keyword1 = data.order_numer,
        keyword2 = data.name,
        remark = data.remark;
    var content = {
      first: {
        value: first
      },
      keyword1: {
        value: keyword1,
        color: '#173177'
      },
      keyword2: {
        value: keyword2,
        color: '#173177'
      },
      remark: {
        value: remark
      }
    }
    var requestData = {
      unit_desc: data.unit_desc,
      content: JSON.stringify(content)
    }
    this.props.dispatch(
      PushMessageAction.createDeliveryAsync(requestData)
    )
  }

  onPageChange(page) {
    var self = this;
    this.props.dispatch(
      PushMessageAction.loadMessagesAsync({
        offset: (page-1)*this.props.limit,
        limit: self.props.limit
      })
    )
  }

  render() {
    var self = this;

    var offset = parseInt(this.props.offset),
        limit = parseInt(this.props.limit),
        count = parseInt(this.props.count)

    var current = Math.ceil(offset/limit) + 1;

    return (
      <div className="content-body Delivery-content-body" >
        <PushMessageSettingTools
          onNewMessageClick={this.onNewMessageClick.bind(self)}
          />
        <PushMessageSettingList
          data = {this.props.data}
          />
        <Paging
          current = {current}
          count = {count}
          limit = {limit}
          onPageChange = {this.onPageChange.bind(self)}
        />
        <PushMessageSettingEdit
          ref="PushMessageSettingEdit"
          onMessageTypeClick = {this.onMessageTypeClick.bind(self)}/>
        <DeliverySettingEdit
          ref = "DeliverySettingEdit"
          property = {this.props.property}
          onNewDeliverySubmit = {this.onNewDeliverySubmit.bind(self)}
          />
      </div>
    )
  }
}

const mapStateToProps = (state, ownProps) => {
  return {
    delivery: state.delivery,
    data: state.delivery.data,
    offset: state.delivery.offset,
    limit: state.delivery.limit,
    count: state.delivery.count
  }
}

export default connect(mapStateToProps)(PushMessageSettingBody);
